<!--
- Author:   .
- Date:    2018/1/31 0031.
- File:    qrcodePay.
-->
<template>
  <div>
    <qriously :value="qrcodeStr" :size="200" style="text-align: center; margin-top: 40%;"/>
    <div style="text-align: center; font-size: 16px;">请使用另一台手机的{{type == 'wx' ? '微信' : '支付宝'}}扫码支付<br>否则将无法支付成功</div>
    <!--<back-nav></back-nav>-->
    <footer-tab></footer-tab>
  </div>
</template>

<script>
  import Vue from 'vue'
  import VueQriously from '../../components/qrcode/vue-qriously.js'
  Vue.use(VueQriously)

  export default{
    data() {
      return {
        type: this.$route.query.type,
        qrcodeStr: this.$route.query.qrcode,
        paySn: this.$route.query.paySn,
        orderId: this.$route.query.order,
        routerLeave: false,
        repeat: null
      }
    },
    components: {},
    mounted() {
      setTimeout(() => {
        this.getOrderStatus()
      }, 2000)
    },
    beforeRouteLeave (to, from, next) {
      this.routerLeave = true
      clearTimeout(this.repeat)
      next()
    },
    methods: {
      getOrderStatus() {
        this.$request.getOrderStatus(this.paySn).then(data => {
          if (data.order_state == this.$dictionary.orderStatus.payed || data.order_state == this.$dictionary.orderStatus.sended || data.order_state == this.$dictionary.orderStatus.recevied) {
            this.$router.push({name: 'order-success', query: {id: this.orderId}})
          } else {
            if (this.routerLeave) {
              return
            }
            this.repeat = setTimeout(() => {
              this.getOrderStatus()
            }, 2000)
          }
        })
      }
    }
  }
</script>

<style>
</style>